<template>
  <div class="bgWhite bannerProduct"  v-loading="loading">
    <p>卡片-产品管理</p>
    <div>
      <div class="productItem " @click="closeAddDialog">
        <div class="add">
          <i class="iconfont icon-add_2_normal"></i>
          <p class="tip">建议上传.png格式，且尺寸为1:1，大小≤1M，每次只能上传一个</p>
        </div>
      </div>
      <draggable v-model="bannerProductList"   @sort="draggableEnd">
        <div class="productItem" v-for=" item in bannerProductList" :key="item.id" @click.stop.prevent="setCurItem(item, 'edit')">
          <el-image :src="utils.setCdnUrl() + item.image"></el-image>
          <el-button  @click.stop.prevent="setCurItem(item, 'del')"  v-if="$_has('/banner_product/del')">删除</el-button>
        </div>
      </draggable>

    </div>

    <Add v-show="addShow" :show="addShow" @closeDialog="closeAddDialog"></Add>
    <Edit v-show="editShow" :id="curItem.banner_id" :show="editShow" @closeDialog="closeEditDialog"></Edit>
    <Del v-show="delShow"  :id="curItem.banner_id" :show="delShow" @closeDialog="closeDelDialog"></Del>
  </div>
</template>

<script>
import { Add, Del, Edit } from './components'
import { hasPermission } from '@/utils/index.js'
import { bannerProductList , sort} from '@/api/index/bannerProduct'
import draggable from 'vuedraggable'
export default {
  name: 'banner_product',

  data () {
    return {
      addShow: false,
      editShow: false,
      delShow: false,
      curItem: {},
      bannerProductList: [],
      loading: false
    }
  },
  created () {
    this.getDataList()
  },
  components: { Add, Del, Edit , draggable},

  methods: {
    draggableEnd () { //拖拽结束
      this.sortRequest()
    },
    sortRequest() { // 排序接口
      let list = JSON.parse(JSON.stringify(this.bannerProductList))
      let banner_ids = []
      for(let i = 0; i < list.length; i++){
        banner_ids.push(list[i].banner_id)
      }
      let params = {
        banner_ids : JSON.stringify( banner_ids)
      }
      sort(params).then(()=>{ })
    },
    setCurItem (item, type){
      this.curItem = item
       if(type == 'edit'){ 
        this.closeEditDialog()  
      }else if(type == 'del'){
        this.closeDelDialog()
      }
      
    },
    getDataList () {
      this.loading= true
      bannerProductList().then(res => {
        if(res.status){
          this.bannerProductList  = res.data.rows
        }
        this.loading= false
      })
    },
     closeAddDialog(){
      if(hasPermission('/banner_product/add')){
        this.addShow = !this.addShow
        if(!this.addShow){
          this.getDataList()
        }
      }else{
        this.$message.error('无新增卡片产品权限，请联系管理员修改权限')
      }
    },
    closeDelDialog(){
      this.delShow = !this.delShow
      if(!this.delShow){
        this.getDataList()
      }
    },
    closeEditDialog () {
      if(hasPermission('/banner_product/edit')){
        this.editShow = !this.editShow
        if(!this.editShow){
          this.getDataList()
        }
      }else{
        this.$message.error('无编辑卡片产品权限，请联系管理员修改权限')
      }
    }
  
  }

}
</script>

<style lang="scss">
@import '@/styles/index/bannerProduct.scss';

</style>